<template>
  <div class="box">
    <!-- 质量控点 -->
    <div class="titleNodeBox">
      <div>
        <div v-for="(itx,idx) in itemList" :key="idx" class="checkDetailsBox">
          <ul>
            <li>
              <span>检验项目</span>
              <b>{{ itx.itemName }}( {{ itx.itemCode }})</b>
            </li>
            <li>
              <span>检验要求</span>
              <b>
                <van-cell-group v-if="itx.requirements">
                  <van-field v-model="itx.requirements" rows="3" disabled autosize type="textarea" />
                </van-cell-group>
                <span v-else>--</span>
              </b>
            </li>
            <li>
              <span>检验说明</span>
              <b>
                <van-cell-group>
                  <van-field v-model="itx.checkExplain" rows="3" size="mini" autosize type="textarea" maxlength="200" show-word-limit />
                </van-cell-group>
              </b>
            </li>
            <li v-show="displayNum !== 1">
              <div class="leftBox">
                <span>上差</span>
                <b>{{ itx.upperDifference }}</b>
              </div>
              <div class="rightBox">
                <span>下差</span>
                <b>{{ itx.lowerDifference }}</b>
              </div>
            </li>
            <li>
              <span>检验工具</span>
              <b>
                <van-field-checkbox v-model="itx.tool" style="width:90%;" placeholder="请选择检验工具" :columns="itoolesList" :option="{label:'toolName',value:'toolId'}" @confirm="chooseTool($event,itx)" />
              </b>
            </li>
            <li v-for="(item,indx) in itx.checkVals" :key="indx">
              <span>检验值</span>
              <b>
                <van-cell-group>
                  <van-field
                    v-model="item.val"
                    type="number"
                    placeholder="请输入数字"
                    :formatter="formatter"
                  /></van-cell-group>
                <em>
                  <i v-show="indx !== 0" class="iconfont icon-weiwancheng" @click="itx.checkVals.splice(indx, 1)" />
                </em>
              </b>
            </li>
            <p class="listP" @click="addBtn(idx)"><i class="iconfont icon-tianjia" />添加检验值</p>
            <li>
              <span>检验结果</span>
              <b>
                <van-radio-group v-model="itx.checkResult" style="margin-top:5px;" class="radioStyle" direction="horizontal">
                  <van-radio :name="1" shape="square">合格</van-radio>
                  <van-radio :name="2" shape="square">不合格</van-radio>
                </van-radio-group>
              </b>
            </li>
            <li>
              <div class="tips">附件上传(支持PNG或者JPG格式,最多5张,单张不得大于5M)</div>
            </li>
            <li>
              <div class="liDiv">
                <van-uploader v-model="itx.itemFileEntityList" multiple :max-count="5" :after-read="afterRead(itx)" :max-size="5242880" accept="image/jpeg ,image/png" @oversize="onOversize">
                  <van-button round type="info">上传图片</van-button>
                </van-uploader>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vanFieldCheckbox from '@/components/selectMultip'
export default {
  name: 'QualityControl',
  components: { vanFieldCheckbox },
  props: {
    itoolesList: {
      type: Array,
      default: function () {
      }
    },
    itemList: {
      type: Array,
      default: function () {
      }
    },
    displayNum: {
      type: String(),
      default: function () {
      }
    }
  },
  data () {
    return {
      itooles: [],
      toolList: [], // 检验工具
      showTool: false,
      activeNames: [0],
      disableds: false
    }
  },
  computed: {
  },

  watch: {
    // itemList: {
    //   handler(news) {
    //     this.$emit('resultChange', news)
    //   },
    //   deep: true
    // }
  },
  async mounted () {
  },
  methods: {
    /** 验证数量只可输入大于0 的整数 */
    formatter (value) {
      return value.replace(/^\D*(\d{0,10}(?:\.\d{0,2})?).*$/g, '$1')
    },
    /**  选择检验工具 */
    chooseTool (e, row) {
      row.itemToolEntityList = []
      row.tool = []
      this.itoolesList.forEach(item => {
        e.forEach(itx => {
          if (item.toolId === itx) {
            row.tool.push(item.toolId)
            row.itemToolEntityList.push(item)
            delete item.id
          }
        })
      })
    },
    onOversize (file) {
      this.$toast.fail('文件大小不能超过 5M')
    },
    // 上传图片
    afterRead (items, type) {
      return file => {
        if (file) {
          if (file.constructor === Object) file = [file]
          const toast = this.$toast.loading({
            duration: 0, // 持续展示 toast
            message: '图片上传中...',
            forbidClick: true,
            loadingType: 'spinner'
          })
          file.filter((item, index) => {
            const form = new FormData()
            form.append('file', item.file)
            this.$axios.post('/dobo-file/files-anon', form).then(res => {
              if (res.data.code === 200) {
                item.fileId = res.data.data.id
                item.fileUrl = res.data.data.url
                item.name = res.data.data.name
                if (++index === file.length) {
                  toast.clear()
                }
              } else {
                this.$toast.fail(res.data.msg)
                toast.clear()
              }
            })
          })
        }
      }
    },
    addBtn (idx) {
      if (this.itemList[idx].checkVals.length > 4) {
        this.$toast.fail('只能添加5个检验值！')
        return
      }
      this.$nextTick(() => {
        const obj = {
          name: '检验值',
          val: ''
        }
        this.itemList[idx].checkVals.push(obj)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.checkDetailsBox{
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  width:100%;
  ul{
    li{
      overflow: hidden;
      height: auto;
      padding: 10px 0;
      font-size: 22px;
      background: #f5f5f5;
      .leftBox{
        width: 50%;
        float: left;
      }
      .rightBox{
        width: 50%;
        float: left;
      }
      .liDiv{
        padding: 0 10px;
        .van-button{
          height: 45px;
          font-size: 20px !important;
        }
      }
      span{
        display: block;
        width: 130px;
        float: left;
        text-align: center;
        margin-right: 10px;
        // border-right:1px solid #ccc ;
      }
      b{
        width: calc(100% - 150px);
        margin-right: 10px;
        display: block;
        float: left;
        font-weight: normal;
        .van-cell{
          width:90%;
          float: left;
        }
        em{
          font-style: normal;
          width: 10%;
          float: left;
          line-height: 35px;
          text-align: center;
          i{
            font-size: 24px;
          }
        }
      }
      .tips {
        color: red;
        font-size: 18px;
        padding: 0 20px;
      }
    }
    .listP{
      height: 40px;
      line-height: 40px;
      background: none;
      text-align: center;
      i{
          font-size: 24px;
      }
    }
  }
}
</style>
<style lang="scss">
.checkDetailsBox{
  ul{
    li{
      b{
        .van-field__control{
          font-size: 18px !important;
        }
        .van-radio__icon{
          .van-icon{
            width:30px;
            height: 30px;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>
